<template>
	<view class="page-wrap" :data-theme="theme" :style="globalColor.style">
		<header-custom :title="pageTitle" />
		<view>
			<view class="container">
				<swiper class="schoolpic" autoplay>
					<swiper-item v-for="(item, index) in schoolInfo.coverMaps" :key="index">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<!--学校信息-->
				<view class="schoolinfo fboxRow Xbetween">
					<view class="left fboxRow">
						<image :src="schoolInfo.logo"></image>
						<view class="content">
							<view class="name">
								<text class="font28">{{schoolInfo.schoolName}}</text>
								<text class="font22">{{schoolInfo.popularity}} 热度</text>
							</view>
							<view class="tags fboxWrap mt8">
								<view v-for="(item, index) in schoolInfo.tags" :key="index" class="tag font22">{{item}}
								</view>
							</view>
						</view>
					</view>
					<view class="right">
						<text v-if="!schoolInfo.isCollection" @tap="onCollect(true)"
							class="bksCIcon bks-c-ziyuan16weishoucang color-C8C8CC font36" />
						<text v-else @tap="onCollect(false)"
							class="bksCIcon bks-c-ziyuan17shoucang color-F7C34A font36" />
					</view>
				</view>
				<!--tabs-->
				<u-tabs :current="tabIndex" :list="tabList" @click="onTabChange" lineColor="#00C15D"
					:scrollable="false"></u-tabs>
				<view v-if="tabIndex == 0">
					<view class="space-block"></view>
					<view class="rich-text color-36363A font28">
						<view v-html="schoolInfo.schoolProfile"></view>
					</view>
				</view>
				<view v-if="tabIndex == 1">
					<view class="pick-box fboxRow Xbetween Ycenter">
						<view class="picker fboxRow Ycenter" @tap="onPickerShow(0)">
							<text class="font22" style="margin-right: 7rpx">{{majorLevel1[majorIndex1]}}</text>
							<text class="bksCIcon bks-c-ziyuan47down font12" />
						</view>
						<view class="picker fboxRow Ycenter" @tap="onPickerShow(1)">
							<text class="font22" style="margin-right: 7rpx">{{majorLevel2[majorIndex2]}}</text>
							<text class="bksCIcon bks-c-ziyuan47down font12" />
						</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item, index) in majorList.list" :key="index">
							<view style="padding: 0 30rpx" class="fboxRow Xbetween Ycenter">
								<view class="left" @tap="gotoDetail(item.id)">
									<view class="name font28">{{item.name}}</view>
									<view class="tags fboxWrap">
										<view v-for="(sub, i) in item.tags" class="tag font22">{{sub}}</view>
									</view>
								</view>
								<view class="right">
									<text v-if="!item.isCheck" @tap="onCollect(true, item.id, index )"
										class="bksCIcon bks-c-ziyuan16weishoucang color-C8C8CC font36" />
									<text v-else @tap="onCollect(false, item.id, index)"
										class="bksCIcon bks-c-ziyuan17shoucang color-F7C34A font36" />
								</view>
							</view>
						</view>
						<u-loadmore style="padding-bottom: 40rpx;" :status="majorList.loading"></u-loadmore>
					</view>
				</view>
				<view v-if="tabIndex == 2">
					<view class="pick-box fboxRow Xbetween Ycenter">
						<view class="left fboxRow">
							<view class="picker fboxRow Ycenter" style="margin-right: 39rpx" @tap="onPickerShow(5)">
								<text class="font22" style="margin-right: 7rpx">重庆</text>
							</view>
							<view class="picker fboxRow Ycenter" @tap="onPickerShow(2)"
								v-if="enrollmentPlan1[planIndex1]">
								<text class="font22" style="margin-right: 7rpx">{{enrollmentPlan1[planIndex1]}}</text>
								<text class=" bksCIcon bks-c-ziyuan47down font12" />
							</view>
						</view>
						<view class="right fboxRow">
							<view class="picker fboxRow Ycenter" style="margin-right: 39rpx" @tap="onPickerShow(3)">
								<text class="font22" style="margin-right: 7rpx">{{scoreLine1[planIndex3]}}</text>
								<text class="bksCIcon bks-c-ziyuan47down font12" />
							</view>
							<view class="picker fboxRow Ycenter" @tap="onPickerShow(4)"
								v-if="enrollmentPlan2[planIndex2]">
								<text class="font22" style="margin-right: 7rpx">{{enrollmentPlan2[planIndex2]}}</text>
								<text class=" bksCIcon bks-c-ziyuan47down font12" />
							</view>
						</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item, index) in planList.list" :key="index">
							<view style="padding: 0 30rpx" class="fboxRow Xbetween Ycenter">
								<view class="left">
									<view class="name font28 color-36363A">{{item.name}}</view>
									<view class="content font22 color-9899A1">计划：{{item.num}}人</view>
								</view>
							</view>
						</view>
						<u-loadmore style="padding-bottom: 40rpx;" :status="planList.loading"></u-loadmore>
					</view>
				</view>
				<view v-if="tabIndex == 3">
					<view class="pick-box fboxRow Xbetween Ycenter">
						<view class="left">
							<view class="picker fboxRow Ycenter" @tap="onPickerShow(5)">
								<text class="font22" style="margin-right: 7rpx">重庆</text>
							</view>
						</view>
						<view class="right fboxRow">
							<view class="picker fboxRow Ycenter" style="margin-right: 39rpx" @tap="onPickerShow(6)">
								<text class="font22" style="margin-right: 7rpx">{{scoreLine1[lineIndex1]}}</text>
								<text class="bksCIcon bks-c-ziyuan47down font12" />
							</view>
							<view class="picker fboxRow Ycenter" @tap="onPickerShow(7)">
								<text class="font22" style="margin-right: 7rpx">{{scoreLine2[lineIndex2]}}</text>
								<text class="bksCIcon bks-c-ziyuan47down font12" />
							</view>
						</view>
					</view>
					<view class="echart" v-if="activeTab == 3">
						<canvas style="width: 100%;height: 400rpx;" ref="chartContainer" id="chartContainer"
							canvas-id="chartContainer"></canvas>
						<!-- <image v-else :src="radarImg" style="width: 100%; height: 100%;" /> -->
					</view>
					<view class="table">
						<view class="header font24 fboxRow">
							<text class="flex1">年份</text>
							<text class="flex1">省控线</text>
							<text class="flex1">最低分</text>
							<text class="flex1">最低位次</text>
							<text class="flex1">录取批次</text>
						</view>
						<view class="body">
							<view class="row font24 fboxRow Ycenter" v-for="(item, index) in scoreLineList"
								:key="index">
								<text class="col flex1">{{item.year}}</text>
								<text class="col flex1">{{item.proScore || ''}}</text>
								<text class="col flex1">{{item.min}}</text>
								<text class="col flex1">{{item.minSection}}</text>
								<text class="col flex1">{{item.localBatchName}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="picker-black">
			<u-picker :show="pickerShow" :defaultIndex="pickerIndex" :columns="pickerList" confirmColor="#BF8355"
				cancelColor="#38383D" @close="pickerShow= false" @cancel="pickerShow= false"
				@confirm="pickerConfirm"></u-picker>
		</view>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import * as echarts from 'echarts'
	import { bksFunctionInfo } from '@/api/bks.index.js'
	import {
		collectAdd,
		collectDel,
		schoolDetail,
		majorBig,
		majorSmall,
		planYearSelect,
		patchSelect,
		planList,
		scoreLine
	} from '@/api/bks.index.js'
	import {
		BottomMore,
		ListLoad
	} from '@/pagesBKS/components/minx.js'
	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				pageTitle: '院校详情',
				pageScrollTop: 0,
				schoolId: '',
				schoolInfo: {},
				activeTab: 0,
				pickerShow: false,
				pickerIndex: [0],
				pickerList: [],
				majorIndex1: 0,
				majorLevel1: ['本科', '专科'],
				majorIndex2: 0,
				majorLevel2: [],
				majorBigList: [], // 原始数据
				planIndex1: 0,
				enrollmentPlan1: [], // 年份数据
				planIndex2: 0,
				enrollmentPlan2: [], // 计划批次数据
				planIndex3: 0,
				planList: {
					list: [],
					page: 1,
					size: 10,
					total: 0,
					loading: 'none'
				},
				lineIndex1: 0,
				scoreLine1: ['物理类', '历史类'],
				// scoreLine1: ['理科', '文科'],
				lineIndex2: 0,
				scoreLine2: ['本科批', '特殊类', '专科批', '国家专项计划本科批', '地方专项计划本科批'],
				chartList: [], // 图表数据
				tapType: 0, // 判断当前选择picker
				majorList: {
					list: [],
					loading: 'none'
				}, // 专业部分展示列表
				ec: {
					// 将 lazyLoad 设为 true 后，需要手动初始化图表
					lazyLoad: true
				},
				radarImg: '',
				scoreLineList: [], // 分数线表格展示数据
				isOverShare: true,
				actionInfo: {}, // 分享数据
				tabIndex: 0,
				tabList: [{
					name: '院校简介'
				}, {
					name: '开设专业'
				}, {
					name: '招生计划'
				}, {
					name: '分数线'
				}],
			}
		},
		onLoad(options) {
			this.schoolId = options.id
			// this.getActionInfo()
			this.getSchoolDetail()
			this.getMajorBig()
			Promise.all([this.getPlanYearSelect(), this.getPatchSelect()]).then(() => {
				this.getPlanList()
			})
		},
		onHide() {
			this.disposeChart()
		},
		methods: {
			getActionInfo() {
				bksFunctionInfo({
					identify: 'DIS0002'
				}).then(res => {
					this.actionInfo = res.data
				})
			},
			// 院校简介
			getSchoolDetail() {
				schoolDetail({
					schoolId: this.schoolId
				}).then(res => {
					if (res.data.popularity >= 1000) {
						res.data.popularity = (res.data.popularity / 10000).toFixed(1) + 'W'
					}
					this.schoolInfo = res.data
					this.pageTitle = res.data.schoolName
				})
			},
			// 获取一级专业
			getMajorBig() {
				majorBig({
					type: this.majorIndex1 + 1,
					schoolId: this.schoolId
				}).then(res => {
					let list = []
					this.majorBigList = res.data
					this.majorBigList.unshift({
						level2: "",
						level2Name: "所有专业类"
					})
					this.majorBigList.forEach(item => {
						list.push(item.level2Name)
					})
					this.majorIndex2 = 0
					this.majorLevel2 = list
					this.getMajorSmall()
				})
			},
			// 获取二级专业
			getMajorSmall() {
				this.majorList.loading = 'loading'
				let {
					majorIndex1,
					majorIndex2,
					majorBigList,
					schoolId
				} = this
				majorSmall({
					level1: majorIndex1 + 1,
					level2: majorBigList[majorIndex2].level2,
					schoolId
				}).then(res => {
					let resList = []
					res.data.forEach(item => {
						resList.push({
							name: item.name,
							tags: [item.level1Name, item.level2Name],
							isCheck: item.isCollected,
							id: item.majorCategoryId
						})
					})
					this.majorList.list = resList
					this.majorList.loading = 'nomore'
				})
			},
			// 获取招生计划年份
			getPlanYearSelect() {
				return planYearSelect({
					schoolId: this.schoolId
				}).then(res => {
					this.enrollmentPlan1 = res.data
				})
			},
			// 获取计划批次
			getPatchSelect() {
				return patchSelect({
					schoolId: this.schoolId
				}).then(res => {
					this.enrollmentPlan2 = res.data
				})
			},
			// 获取招生计划数据
			getPlanList() {
				if (this.planList.loading == 'nomore') {
					return
				}
				this.planList.loading = 'loading'
				const {
					schoolId,
					planIndex1,
					enrollmentPlan1,
					planIndex2,
					enrollmentPlan2,
					planIndex3
				} = this
				let params = {
					schoolId,
					localBatchName: enrollmentPlan2[planIndex2],
					localTypeId: planIndex3 + 1,
					year: enrollmentPlan1[planIndex1],
					page: this.planList.page,
					size: this.planList.size
				}
				planList(params).then(res => {
					const {
						list,
						pageInfoVO: {
							total,
							page,
							size
						}
					} = res.data
					let resList = []
					res.data.list.forEach(item => {
						resList.push({
							name: item.spname,
							// tags: [item.localBatchName, item.level2Name],
							num: item.num
						})
					})
					this.planList.list = this.planList.list.concat(resList)
					this.planList.total = total
					ListLoad(page, size, total, (state) => {
						this.planList.loading = state
					})
				})
			},
			// 下拉加载数据
			reachBottom() {
				if (this.activeTab == 2) {
					const that = this
					BottomMore(this.planList, (state, res) => {
						that.planList.loading = res.loading
						that.planList.page = res.page
						if (state) {
							that.getPlanList()
						}
					})
				}
			},
			// 获取分数线数据
			getScoreLineDetail() {
				let {
					lineIndex1,
					lineIndex2,
					scoreLine2,
					schoolId
				} = this
				scoreLine({
					provinceId: '50',
					type: lineIndex1 + 1,
					localBatchName: scoreLine2[lineIndex2],
					schoolId
				}).then(res => {
					this.chartList = res.data.lineChartList
					this.scoreLineList = res.data.lineInfoList
					this.initChart()
				})
			},
			// 设置图表数据
			setOption() {
				let dataX = [],
					minList = [],
					proScoreList = []
				this.chartList.forEach(item => {
					dataX.push(item.year)
					minList.push(item.min)
					proScoreList.push(item.proScore)
				})
				let option = {
					color: ["#FFBC44", "#00C15D"],
					legend: {
						bottom: 20,
						left: 'center',
						// z: 100
					},
					grid: {
						top: '10%',
						left: '5%',
						right: '5%',
						containLabel: true
					},
					// tooltip: {
					// 	show: true,
					// 	trigger: 'axis'
					// },

					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: dataX,
						axisLine: {
							lineStyle: {
								color: '#C8C8CC'
							}
						},
					},
					yAxis: {
						type: 'value',
						min: function(value) {
							return value.min - 20;
						},
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#C8C8CC'
							}
						}
					},
					series: [{
						name: '最低分',
						type: 'line',
						data: minList,
						label: {
						  normal: {
							show: true,
							textStyle: {
							  fontSize: 12
							},
							formatter: "{c}"
						  },
						},
					}, {
						name: '省控线',
						type: 'line',
						data: proScoreList,
						label: {
						  normal: {
							show: true,
							textStyle: {
							  fontSize: 12
							},
							formatter: "{c}"
						  },
						},
					}]
				};
				this.chart.setOption(option);
			},
			// 初始化图表
			initChart() {
				this.chart = echarts.init(document.getElementById('chartContainer'))
				this.setOption();
			},
			// 销毁图表
			disposeChart() {
				if (this.chart) {
					this.chart.dispose();
				}
			},
			// tab切换
			onTabChange(e) {
				this.tabIndex = e.index
				this.activeTab = e.index
				if (e.index == 3) {
					this.getScoreLineDetail()
				} else {
					// this.disposeChart()
				}
			},
			// 点击收藏
			onCollect(status, id, index) {
				let params = {
					businessId: this.schoolId,
					collectType: '1'
				}
				if (id) {
					params = {
						businessId: id,
						collectType: '2'
					}
				}
				let fn = collectAdd,
					title = '已收藏'
				if (!status) {
					fn = collectDel,
						title = '已取消'
				}
				fn(params).then(res => {
					if (id) {
						this.majorList.list[index].isCheck = status
					} else {
						this.schoolInfo.isCollection = status
					}
					uni.showToast({
						title,
						icon: 'none',
						duration: 2000
					})
				})
			},
			// 显示picker
			onPickerShow(type) {
				if (type == 5) {
					uni.showToast({
						title: '暂只开放重庆区域',
						icon: 'none',
						duration: 2000
					})
				} else {
					this.tapType = type
					this.pickerShow = true
					let list = []
					let index = 0;
					switch (type) {
						case 0:
							index = this.majorIndex1;
							list = this.majorLevel1;
							break;
						case 1:
							index = this.majorIndex2;
							list = this.majorLevel2;
							break;
						case 2:
							index = this.planIndex1;
							list = this.enrollmentPlan1;
							break;
						case 3:
							index = this.planIndex3;
							list = this.scoreLine1;
							break;
						case 4:
							index = this.planIndex2;
							list = this.enrollmentPlan2;
							break;
						case 6:
							index = this.lineIndex1;
							list = this.scoreLine1;
							break;
						case 7:
							index = this.lineIndex2;
							list = this.scoreLine2;
							break;
					}
					this.pickerIndex = [index]
					this.pickerList = [list]
				}
			},
			// 点击确定
			pickerConfirm(e) {
				const index = e.indexs[0]
				switch (this.tapType) {
					case 0:
						this.majorIndex1 = index;
						this.getMajorBig();
						break;
					case 1:
						this.majorIndex2 = index;
						this.getMajorSmall();
						break;
					case 2:
						this.planIndex1 = index;
						this.planList = {
							list: [],
							page: 1,
							size: 10,
							total: 0,
							loading: 'loading'
						};
						this.getPlanList();
						break;
					case 3:
						this.planIndex3 = index;
						this.planList = {
							list: [],
							page: 1,
							size: 10,
							total: 0,
							loading: 'loading'
						}
						this.getPlanList()
						break;
					case 4:
						this.planIndex2 = index;
						this.planList = {
							list: [],
							page: 1,
							size: 10,
							total: 0,
							loading: 'loading'
						}
						this.getPlanList()
						break;
					case 6:
						this.lineIndex1 = index;
						this.getScoreLineDetail()
						break;
					case 7:
						this.lineIndex2 = index;
						this.getScoreLineDetail()
						break;
				}
				this.pickerShow = false
			},
			gotoDetail(id) {
				this.$pageTo('/bks/index/major/detail/index', {
					id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/index/school/index/index.wxss */
	.tags .tag {
		padding: 0 16rpx;
		background: #F5F5FA;
		border-radius: 3px;
		height: 36rpx;
		line-height: 36rpx;
		color: #9899A1;
		margin-top: 6rpx;
		margin-right: 12rpx;
	}

	.container .schoolpic {
		width: 100%;
		height: 360rpx;
	}

	.container .schoolpic image {
		width: 100%;
	}

	.container .schoolinfo {
		padding: 0 30rpx;
	}

	.container .schoolinfo .left image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin-right: 21rpx;
		position: relative;
		top: -60rpx;
	}

	.container .schoolinfo .left .content {
		width: calc(100% - 181rpx);
		padding-top: 10rpx;
	}

	.container .schoolinfo .left .name {
		color: #323233;
	}

	.container .schoolinfo .left .name text:last-child {
		color: #969699;
		margin-left: 14rpx;
	}

	.container .schoolinfo .right {
		padding-top: 20rpx;
	}

	.container .rich-text {
		padding: 30rpx;
		line-height: 50rpx;
	}

	.container .pick-box {
		padding: 0 30rpx;
		height: 70rpx;
		background: #F5F5FA;
	}

	.container .list .item {
		padding: 30rpx 0;
		border-bottom: 1px solid #F0F0F5;
	}

	.container .list .item .left {
		margin-right: 10rpx;
	}

	.container .list .item .left .name {
		margin-bottom: 19rpx;
	}

	.container .list .item .right button {
		padding: 0;
		width: 118rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		border-radius: 6rpx;
		font-size: 24rpx;

	}

	.container .list>.item .right .uncheckbtn {
		border: 1px solid #6871FE;
		color: #6871FE;
	}

	.container .list>.item .uncheckbtn {
		color: #969699;
	}

	.container .echart {
		width: 100%;
		height: 400rpx;
	}

	.container .table {
		padding: 0 36rpx;

		text-align: center;
	}

	.container .table .header {
		color: #969699;
	}

	.container .table .body .row {
		height: 72rpx;
		color: #323233;
		border-bottom: 1px solid #F0F0F5;
	}
</style>